import "./index.scss";
import basic_icon from "./assets/basic_icon.png";
import { useAppDispatch } from "@/app/hooks";
import { useEffect } from "react";
import {
	getSubjectList,
	selectActiveSubject,
	selectSubjectList,
	setActiveSubject,
} from "@/store/slice/subject";
import { useSelector } from "react-redux";
import { subjectListBody } from "@/util/request";
import { useNavigate } from "react-router-dom";
import { message } from "antd";

function ExamSelect() {
	const dispatch = useAppDispatch();
	const navigate = useNavigate();
	const subjectList = useSelector(selectSubjectList);
	const activeSubject = useSelector(selectActiveSubject);
	useEffect(() => {
		dispatch(getSubjectList());
	}, []);

	function handleClickSubject(value: string) {
		dispatch(setActiveSubject(value));
	}
	const handleAnswer = () => {
		if (activeSubject) {
			navigate(`/exam/${activeSubject}`);
		} else {
			message.error("请选择考试科目");
		}
	};

	return (
		<>
			<div className="examSelect_wrap">
				{subjectList.map((item: subjectListBody, index: number) => {
					return (
						<div className="examSelect_wrap_item" key={item.value}>
							<div className="examSelect_wrap_item_title">
								<img src={basic_icon} alt="" />
								<span>
									{index + 1}丶{item.title}
								</span>
							</div>
							{item.children ? (
								<div className="examSelect_wrap_item_class">
									{item.children.map((item: subjectListBody) => {
										return (
											<div
												className={
													activeSubject === item.value
														? "active examSelect_wrap_item_class_item"
														: "examSelect_wrap_item_class_item"
												}
												onClick={() => handleClickSubject(item.value)}
												key={item.value}
											>
												{item.title}
											</div>
										);
									})}
								</div>
							) : null}
						</div>
					);
				})}
			</div>
			<div className="examSelect_wrap_start">
				<div className="btn" onClick={handleAnswer}>
					开始答题
				</div>
			</div>
		</>
	);
}

export default ExamSelect;
